import logo from '../logo.svg';
import '../App.css';
import 'bootstrap/dist/css/bootstrap.min.css'
import PriceList from '../components/PriceList';
import { LIST_VIEW, CHART_VIEW, getYearAndMonth } from '../utility'
import React ,{ Component } from 'react';
import MonthPicker from '../components/MonthPicker';
import TotalPrice from '../components/TotalPrice';
import CreateButtom from '../components/CreateButtom';
import { padleft } from '../utility';
import ViewTab from '../components/ViewTab';

export const categories = {
  "1": {
    "id":"1",
    "name":"旅行",
    "type":"outcome",
    "iconName":"ios-plane"
  },
  "2": {
    "id":"2",
    "name":"工资",
    "type":"income",
    "iconName":"ios-plane"
  }
}

export const items = [
  {
    "id":1,
    "title":"to wuhan",
    "price":200,
    "date":"2021-08-23",
    "cid": 1
  },
  {
    "id":2,
    "title":"to yichang",
    "price":400,
    "date":"2021-08-23",
    "cid": 1
  },
  {
    "id":3,
    "title":"to yichang",
    "price":300,
    "date":"2021-08-23",
    "cid": 2
  }
]

const testitem = {
  "id":4,
  "title":"to yichang",
  "price":100,
  "date":"2021-08-23",
  "cid": 1
}


class Home extends Component {

  constructor(props) {
    super(props)
    this.state = {
      items,
      currentDate: getYearAndMonth(),
      tabView: LIST_VIEW
    }
  }

  changeView = (view) => {
    this.setState({
      tabView: view
    })
  }

  changeDate = (year, month) => {
    this.setState({
      currentDate: { year, month }
    })
  }

  modifyItem = (modifyItem) => {
    const newitems = this.state.items.map(item => {
      if (item.id === modifyItem.id) {
        return { ...item, title : '修改后'}
      } else {
        return item
      }
    })
    this.setState({
      items: newitems
    })
  }

  createItem = () => {
    this.setState({
      items: [testitem, ...this.state.items]
    })
  }

  deleteItem = (deleteItem) => {
    const filteritems = this.state.items.filter(item => item.id !== deleteItem.id)
    this.setState({
      items: filteritems
    })
  }

  render() {
    const {items, currentDate, tabView } = this.state
    // 筛选list界面里显示的账单
    const itemsWithCategory = items.map(item => {
      item.category = categories[item.cid]
      return item
    }).filter(item => {
      return item.date.includes(`${currentDate.year}-${padleft(currentDate.month)}`)
    })
    let incomeTotal = 0, outcomeTotal = 0
    // eslint-disable-next-line array-callback-return
    itemsWithCategory.map(item => {
    if (item.category.type === 'income') {
      incomeTotal += item.price
    } else {
      outcomeTotal += item.price
    }
})
    return(
      <React.Fragment>
      <div>
      <header className="row mb-5">
        <img src={logo} className="App-logo" alt="logo"/>
      </header>
      <div className="row">
        <div className="col">
          <MonthPicker year={currentDate.year} month={currentDate.month} onChange={this.changeDate}></MonthPicker>
        </div>
        <div className="col">
          <TotalPrice incomeTotal={incomeTotal} outcomeTotal={outcomeTotal} />
        </div>
      </div>
        <div className="py-3 px-3">
          <ViewTab activeTab={tabView} onTabChange={this.changeView}></ViewTab>
          <CreateButtom toCreate={this.createItem}></CreateButtom>

          {
            tabView === LIST_VIEW &&
            <PriceList items={itemsWithCategory} onModifyItem ={this.modifyItem} onDeleteItem={this.deleteItem}></PriceList>

          }

          {
            tabView === CHART_VIEW &&
            <h1>chart</h1>
          }
          </div>
      </div>
      </React.Fragment>
    )
  }
}

export default Home